<template>
  <div class="article_main">
    <div class="middle_con">
      <div class="list_con" @scroll="scrollArticle" ref="el">
        <div class="search_con">
          <div class="primary_color yuan el-icon-search" @click="hideSearch = !hideSearch"></div>
          <el-input type="text" placeholder="按Enter开始查找输入内容" @keydown.enter.native="searchKeyDown" v-model="search_input"
            :class="!hideSearch ? 'hide_input' : ''"></el-input>
        </div>
        <ul class="article_list_ul">
          <li v-for="item in articles" :key="item.id" @click="showArticleInfo(item.id)">
            <img class="item_icon" :src="item.icon" />
            <div class="right_con">
              <p class="item_title">{{ item.article_title }}</p>
              <span class="iconfont">&#xe8fb;</span>&nbsp;
              <span>发表于:{{
                item.create_time | formatTime    
              }}</span>&nbsp;
              <span>|</span>&nbsp;
              <span class="iconfont">&#xe91a;</span>&nbsp;
              <span>{{ item.type }}</span>
              <p class="article_brief">
                {{ item.article_brief.substr(0, 80) }}...
              </p>
            </div>
          </li>
          <div class="loading_block el-icon-loading" v-if="isLoading"></div>
          <p class="p_empt" v-else-if="!isLoading && articles.length == 0">暂无数据</p>
          <p class="p_empt" v-if="isNullList && !(!isLoading && articles.length == 0)">暂无更多数据</p>
        </ul>
        <div class="page_select_con"></div>
      </div>
    </div>
    <div class="aside_con">
      <div class="right_aside_con">
        <div class="title_con">
          <span class="iconfont tongzhi">&#xe8de;</span><span class="title_font">公告</span>
        </div>
        <div class="content_con">
          <p class="message">
            {{ this.serverInfo.announcement }}
          </p>
        </div>
      </div>

      <div class="right_aside_con">
        <div class="title_con">
          <span class="iconfont type">&#xe8ff;</span><span class="title_font">标签</span>
        </div>
        <div class="content_con">
          <p class="message">
            <a :href="article_url">全部</a>
            <a v-for="item in $store.state.article.labels" :key="item.id"
              :href="article_url + '?label=' + item.label_name" @click="clearTempData"> {{ item.label_name }}</a>
          </p>
        </div>
      </div>

      <div class="right_aside_con">
        <div class="title_con">
          <span class="iconfont zixun">&#xe922;</span><span class="title_font">资讯</span>
        </div>
        <div class="content_con">
          <div class="data_item"><span>文章数目:</span><span>{{ this.total }}章</span></div>
          <div class="data_item"><span>运行时长:</span><span>{{ this.serverInfo.start_date | intervalTime }}天</span></div>
          <div class="data_item">
            <span>最后更新时间:</span><span>{{ this.serverInfo.last_submit_article_date | intervalTime }}天前</span>
          </div>
          <div class="data_item"><span>博客版本:</span><span>{{ this.serverInfo.version }}1</span></div>
        </div>
      </div>

      <div class="right_aside_con">
        <div class="content_con clear_flex">
          <img class="gifs" src="https://s2.loli.net/2023/12/19/T9ElJIpe5S8yH73.gif">
          <img class="gifs" src="https://s2.loli.net/2023/12/19/T9ElJIpe5S8yH73.gif">
        </div>
      </div>
      <ScrollTop></ScrollTop>
    </div>
  </div>
</template>
<script>
import { $getArticleList, $serverInfo, $articleLabels } from "@/api/desk";
import { formatTime } from "@/utils/tools";
import ScrollTop from "@/components/ScrollTop.vue"

export default {
  name: "ArticleList",
  components: {
    ScrollTop
  },
  filters: {
    formatTime: (v) => formatTime(v),
    // 时间离今天有多少天
    intervalTime: (v) => Math.ceil((Date.now() - v) / 1000 / 60 / 60 / 24)
  },
  data() {
    return {
      article_url: "/#/home/article_list", // 文章列表请求地址
      pageNum: 1, // 页码
      pageSize: 10, // 文章数
      articles: [],
      label: "",
      total: 0,
      scrollTop:0,
      isNullList: false, // 是否已经没有数据了
      hideSearch: false, // 是否隐藏搜索按钮
      search_input: "", // 搜索关键字
      isLoading: true, // 是否在加载数据
      serverInfo: {} // 服务器信息，公告等
    };
  },
  created() {
    this.initData();
    window.addEventListener("hashchange", () => {
      console.log("页面重新加载");
      this.label = ""
      this.articles = []
      this.initData();
    })
  },
  mounted(){
    this.scrollTop = this.$refs.el.scrollTop;
  },
  methods: {

    // 清理临时数据，防止点击标签跳转时数据访问出错
    clearTempData() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.total = 0;
      this.isNullList = false;
    },

    // 页面初始加载
    initData() {
      let query = this.$route.query;
      if (query.label) {
        this.label = query.label;
      }
      this.getArticleList();
      this.getServerInfo();
      this.articleLabels();
      console.log(this.$store.state.article.labels);
    },

    // 获取文章列表
    articleLabels() {
      $articleLabels().then(result => {
        this.$store.dispatch('setLabelsAction', result.data)
        console.log("labels: ", result);
      })
    },

    // 进入文章详细页面
    showArticleInfo(id) {
      console.log("文章：" + id);
      this.$router.push({
        path: "/home/article_info",
        query: {
          id: id
        }
      });
    },

    // 获取文章列表
    getArticleList() {
      this.isLoading = true
      this.isNullList = false
      $getArticleList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        label: this.label,
        articleTitle: this.search_input
      })
        .then((result) => {
          console.log("articles: ", result);
          this.articles = [...this.articles, ...result.data.data];
          this.total = result.data.tatal
          // 判断是否已经没有可获取的数据了
          if (result.data.data.length === 0) {
            this.isNullList = true
          } else {
            this.isNullList = false
          }
          // 如果总文章数量是小于pageNum那代表已经没有数据了，直接显示“暂无更多数据”
          if (this.articles.length < this.pageSize) {
            this.isNullList = true
          }
        }).finally(() => {
          this.isLoading = false
        })
    },

    // 获取服务器信息
    getServerInfo() {
      this.isLoading = true
      $serverInfo().then(result => {
        this.serverInfo = result.data
        console.log("serverInfo:", this.serverInfo);
      }).finally(() => {
        this.isLoading = false
      })
    },

    // 文章列表滚动
    scrollArticle(e) {
      if (this.isNullList) {
        return
      }
      if (Math.ceil(e.target.offsetHeight + e.target.scrollTop) == e.target.scrollHeight) {
        console.log("到底了");
        if (this.articles.length > 0) {
          this.pageNum++;
          this.getArticleList();
        }
      }
    },

    // 获取按键内容
    searchKeyDown(e) {
      if (e.code === "Enter") {
        // 因为是重新提交搜索内容，所以需要重置页码,还有是否没有数据的标识 也要重置
        this.pageNum = 1
        this.isNullList = false
        // 提交搜索内容
        this.articles = []
        this.getArticleList()
        this.hideSearch = false
      }
    }
  },
};
</script>
<style lang="scss" scoped>
// 手机
@media screen and (max-width:600px) {
  .article_main {
    display: block;
    width: 100%;
    height: 100%;

    .middle_con {
      width: 100%;
      height: 100%;

      .item_icon {
        min-width: 100px !important;
        width: 100px !important;
        height: 70px !important;
      }
    }
  }

  .aside_con {
    display: none;
  }
}

.article_main {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  position: relative;
  z-index: 1;

  .el-icon-loading {
    width: 100%;
    text-align: center;
    font-size: 30px;
  }

  .middle_con {
    flex: 1 auto;
    min-width: 300px;
    display: flex;
    flex-direction: column;

    .list_con::-webkit-scrollbar {
      display: none;
    }

    .list_con {
      overflow: scroll;

      .hide_input {
        ::v-deep .el-input__inner {
          width: 0 !important;
          overflow: hidden;
          padding: 0 !important;
          border: 0 !important;
        }
      }

      .search_con {
        display: flex;
        min-width: 35px;
        max-height: 35px;
        position: relative;
        line-height: 35px;
        padding-left: 9px;
        box-sizing: border-box;
        border-color: #333;
        z-index: 2;
        position: absolute;

        .yuan {
          min-width: 35px;
          position: absolute;
          height: 35px;
          z-index: 2;
          border-radius: 50%;
          line-height: 35px;
          text-align: center;
          color: white;
        }

        ::v-deep .el-input .el-input__inner {
          position: absolute;
          max-height: 35px;
          width: 250px;
          border-top-right-radius: 50px;
          border-bottom-right-radius: 50px;
          padding-left: 20px;
          outline: none;
          box-sizing: border-box;
          left: 20px;
          transition: 0.3s;
        }


      }

      .article_list_ul {
        width: 100%;
        list-style: none;
        box-sizing: border-box;
        padding: 10px 15px;

        .p_empt {
          display: inline-block;
          width: 100%;
          text-align: center;
          color: #777;
          font-size: 13px;
          border-radius: 3px;
          background-color: #eee;
        }

        >li:hover {
          transform: scale(1.02);
        }

        >li {
          transition: 0.3s;
          width: 100%;
          height: 150px;
          margin-bottom: 10px;
          border-radius: 7px;
          border: 1px solid #fff;
          background-color: white;
          box-sizing: border-box;
          display: flex;
          padding: 10px;
          // box-shadow: 0 0 5px 0px rgb(161, 161, 161);

          .item_icon {
            width: 200px;
            min-width: 200px;
            height: 100%;
            border-radius: 7px;
            background-color: #555;
          }

          .right_con {
            flex: 1 auto;
            overflow: hidden;
            padding: 0 10px;

            .article_brief {
              color: #333;
              font-size: 13px;
            }

            span {
              font-size: 13px;
              color: rgb(121, 121, 121);
            }

            .item_title {
              color: rgb(75, 75, 75);
              font-size: 20px;
            }
          }
        }
      }

      .page_select_con {
        width: 100%;
        height: 50px;
        // background-color: aqua;
        margin-top: 10px;
      }
    }
  }

  .aside_con {
    min-width: 200px;
    max-width: 200px;
    box-sizing: border-box;
    padding: 10px;

    .right_aside_con {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      background-color: white;
      border-radius: 7px;
      padding: 7px;
      box-sizing: border-box;
      box-shadow: 0 0 5px 0px rgb(233, 233, 233);

      .title_con {
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;

        .title_font {
          font-size: 13px;
          margin: 0 5px;
        }

        .iconfont {
          font-size: 20px !important;
        }

        .tongzhi {
          color: red;
        }

        .type {
          color: #333;
        }

        .zixun {
          color: #333;
        }
      }

      .content_con {
        flex: 1 auto;
        display: flex;
        flex-direction: column;
        color: #555;
        font-size: 12px;

        .gifs {
          display: inline-block;
          width: 50%;
        }

        .gifs:nth-child(2) {
          transform: rotateY(180deg);
        }

        .data_item {
          padding: 5px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
        }

        .message a {
          text-decoration: none;
          background-color: #999;
          padding: 0 3px;
          display: inline-block;
          margin-bottom: 2px;
          border-radius: 3px;
          color: white;
          margin-right: 5px;
        }
      }

      .clear_flex {
        display: inline-block;
        background-color: #104374;
        border-radius: 5px;
        overflow: hidden;
      }
    }
  }
}
</style>